<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <ul id="app">
        <!-- li{li$}*5 -->
        <!-- v-bind:class = {类名: 判断}  当判断为true时添加该类名 -->
        <!-- v-bind:class 简写成  :class-->
        <li v-bind:class="{'word': true, active: activeIdx === 0}" v-on:click="changeActiveIdx(0)">li1</li>
        <li v-bind:class="{'word': true, active: activeIdx === 1}" @click="changeActiveIdx(1)">li2</li>
        <li v-bind:class="{'word': true, active: activeIdx === 2}" @click="changeActiveIdx(2)">li3</li>
        <li v-bind:class="{'word': true, active: activeIdx === 3}" @click="changeActiveIdx(3)">li4</li>
        <li v-bind:class="{'word': true, active: activeIdx === 4}" @click="changeActiveIdx(4)">li5</li> 
    </ul>
    <script>
        new Vue({
            el: '#app',
            data: {
                activeIdx: 3
            },
            methods: {
                changeActiveIdx (idx) {
                    this.activeIdx = idx
                }
            }
        })
    </script>

    <style>
        ul,li{list-style: none;}
        ul{overflow: hidden;}
        li{float: left;border: 1px solid #ccc;margin-right: 5px;}
        li.active{
            color:red;
        }
        li.word{
            font-size: 20px;
        }
    </style>
</body>
</html>